<template>
	<view class="service-questionnaire">
		<view class="wallpaper"></view>
		<view class="container">
			<!--banner内容-->
			<view class="top-banner">
				<view class="left">
					<view class="top-banner__title">
						关注您的服务
					</view>
					<view class="top-banner__icon mt25">
						<view class="icon-block">
							<i class="icon-crosshair icon28 mr5"/>
							精准服务
						</view>
						<view class="icon-block ml15">
							<i class="icon-eye icon28 mr5"/>
							时刻跟踪
						</view>
					</view>
				</view>
				<view class="right">
					<image src="~@/static/img/service-questionnaire-ing.png" class="top-banner-rightImg"/>
				</view>
			</view>
			<view class="border-container">
				<questionnaire-components ref="questionnaire-comp" :id="id" @isFinish="isFinish"/>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import QuestionnaireComponents from "@/components/questionnaire-component.vue";
import {onLoad} from "@dcloudio/uni-app";
import {reactive, ref} from "vue";


let routeQuery = reactive<Record<string, any>>({});

let id = ref<string>("");

// 完成问卷
const isFinish = (val: Record<string, any>) => {
	
	let arr: Array<string> = [];
	let isAns = uni.getStorageSync("isAns");
	if (isAns) {
		isAns.push(routeQuery.id);
	} else {
		arr.push(routeQuery.id);
	}
	isAns ? uni.setStorageSync("isAns", isAns) : uni.setStorageSync("isAns", arr);
	
	uni.showLoading();
	// 储存至云数据库中
	uniCloud.callFunction({
		name: "add-questionnaire",
		data: val
	}).then((res: any) => {
		uni.hideLoading();
		if (res?.result?.code === 200) {
			uni.navigateTo({
				url: "/pages/index/completed"
			});
		} else {
			uni.showToast({
				title: "储存数据出现错误",
				icon: "error"
			});
		}
	});
};


onLoad((option) => {
	routeQuery = {...option};
	id.value = routeQuery.id;
});

</script>

<style lang="scss">
.service-questionnaire {
	background: #FFFFFF;
	height: 100vh;
	
	.wallpaper {
		width: 100%;
		height: 50vh;
		position: fixed;
		background-color: #2DCA8D;
	}
	
	.container {
		position: relative;
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
		
		.border-container {
			background-color: #FFFFFF;
			border-radius: 48rpx 48rpx 0 0;
		}
		
		.top-banner {
			padding: 15rpx 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			&__title {
				font-size: 52rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
			
			&__icon {
				display: flex;
				
				.icon-block {
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #0FBA85;
					padding: 8rpx 16rpx;
					background: rgba(255, 255, 255, 0.95);
					border-radius: 8rpx;
				}
			}
			
			&-rightImg {
				width: 238rpx;
				height: 238rpx;
			}
		}
	}
	
	.popup-content {
		padding: 40rpx;
		max-height: 85vh;
		overflow: auto;
	}
}
</style>
